<template>
    <div class="foot">
        <label for="c-box">
            <input type="checkbox" :checked='isAll' @change="checkAll" id="c-box">
            <span>完成{{doneTotal}}/全部{{total}}</span>
        </label>
        <!-- <button class="clear" @click="clearAll">清除已完成</button> -->
        <el-button type="danger" round @click="clearAll" class="clear">清除已完成</el-button>
    </div>
</template>

<script>
export default {
    name:'NoteFooter',
    data () {
      return {
        radio: 3
      };
    },
    props:['todos','checkAllTodo','clear'],
    methods: {
            checkAll(e){
                this.checkAllTodo(e.target.checked)
            },
            clearAll(){
                this.clear();
            }
        },

    computed:{
        total(){
            return this.todos.length
        },
        
        doneTotal(){
            let i=0;
            this.todos.forEach((todo)=>{
                if(todo.done) i++
            })
            return i
        },
        isAll:{
            get(){
                return this.total===this.doneTotal && this.total > 0
            },
            set(newValue){
                this.checkAllTodo(newValue)
            }
        },
    },
    
}
</script>

<style scoped>
.foot {
    margin-top: 10px;
    position: relative;
    width: 500px;
    height: 35px;
}
.clear {
    position: absolute;
    right: 0;
    width: 115px;
    height: 35px;
}
</style>